<template>
  <el-dialog v-dialogDrag :visible.sync="dialogVisible" :title="title" width="850px" @close="resetForm('ruleForm')">
    <button-group ref="buttonGroup" @cancel="dialogVisible = false" />
    <div class="formTopFont">{{title}}</div>
    <el-row>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="90px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备">
              <el-input :value="`${detailFont.equipName}${detailFont.equipCode ? '【' + detailFont.equipCode +'】' : ''}`" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="故障分类">
              <el-input :value="detailFont.classifyName" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="紧急度">
              <el-input :value="detailFont.emergency" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="故障描述">
            <el-input :value="detailFont.faultRemark" type="textarea" rows="2" :disabled="true" show-word-limit />
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="责任人">
              <el-input v-model="detailFont.responsiblePersonName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker v-model="ruleForm.startTime" disabled style="width: 100%" :clearable="false" type="datetime" size="mini" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker v-model="ruleForm.endTime" @change="timeChange" style="width: 100%" :clearable="false" type="datetime" size="mini" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="维修工时" prop="repairHours">
              <el-input-number v-model="ruleForm.repairHours" disabled :precision="2" :min="0" size="mini" :max="9999.99" style="width: 80%;margin-right:1%;" :controls="false" />小时
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="维修成本" prop="repairCost">
              <el-input-number v-model="ruleForm.repairCost" :precision="2" :min="0" size="mini" :max="99999999.99" style="width: 90%;margin-right:1%;" :controls="false" />元
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否解决" prop="isSolve">
              <el-select v-model="ruleForm.isSolve" :clearable="false" filterable size="mini">
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="说明" prop="instructions">
            <el-input v-model="ruleForm.instructions" maxlength="200" type="textarea" rows="3" show-word-limit />
          </el-form-item>
        </el-row>
      </el-form>
      <p style="text-align:right;">
        <el-button type="primary" icon="el-icon-check" @click="submitForm('ruleForm')">{{detailFont.repairMethod == '1' ? '报工确认':'完工报工'}}</el-button>
      </p>
    </el-row>
    <bottom-font ref="bottomFont" :obj-name="detailFont.responsiblePersonName ? detailFont.responsiblePersonName : this.$store.getters.compInfo.userName" :obj-date="ruleForm.startTime" />
  </el-dialog>
</template>
<script>
import { computationTime } from '@/utils/function'
import bottomFont from '@/components/BottomFont'
export default {
  components: { bottomFont },
  props: {},
  data() {
    return {
      title: '',
      detailFont: {},
      ruleForm: {
        repairHours: '',
        repairCost: '',
        isSolve: '',
        instructions: '',
        id: '',
        endTime: '',
        startTime: ''
      },
      rules: {
        endTime: [
          {
            required: true,
            message: '请选择结束时间！',
            trigger: 'change'
          }
        ],
        isSolve: [
          {
            required: true,
            message: '请选择是否解决！',
            trigger: 'change'
          }
        ],
        repairHours: [
          {
            required: true,
            message: '请输入维修工时！', // '请选择是否解决',
            trigger: 'blur'
          }
        ]
      },
      dialogVisible: false,
      obj: {}
    }
  },
  watch: {},
  mounted() {},
  methods: {
    /**
     * @description: 新增编辑
     * @param {*} row
     * @return {*}
     */
    async showDialog(row) {
      this.obj = row
      this.ruleForm.id = row.id
      if (row.repairMethod == '1') {
        this.title = '内修-报工确认单'
        this.detailFont = Object.assign({}, row)
      } else {
        this.title = '外修-完工确认单'
        this.detailFont = Object.assign({}, row)
      }
      this.ruleForm.startTime = row.startTime
      this.dialogVisible = true
    },
    /* 结束时间选择事件 */
    timeChange($event) {
      if (computationTime(this.ruleForm.startTime, $event) < 0) {
        this.ruleForm.endTime = ''
        this.$message.error('结束时间不能早于开始时间！')
      }
      console.log($event, this.ruleForm.startTime.slice(0, 16))
      this.ruleForm.startTime = this.ruleForm.startTime.slice(0, 16)
      let time =
        new Date($event).getTime() -
        new Date(this.ruleForm.startTime.replace(/-/g, '/')).getTime()
      if (time > 0) {
        this.ruleForm.repairHours = (time / 3600000).toFixed(1)
      } else {
        this.ruleForm.repairHours = '0.0'
      }
    },
    /**
     * @description: 表单提交
     * @param {*} formName
     * @return {*}
     */
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.ruleForm.startTime = this.obj.startTime
          const res = await this.$axios.post(
            '/equip/repair/order/task/report',
            this.ruleForm
          )
          if (res?.data.code === 200) {
            this.$notify.success('提交成功！')
            this.dialogVisible = false
            this.$emit('getTableInfo')
          } else {
            this.$notify.error(res.data.msg)
          }
        }
      })
    },
    /**
     * @description: 重置表单
     * @param {*} formName
     * @return {*}
     */
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.ruleForm = {
        repairHours: '',
        repairCost: '',
        isSolve: '',
        instructions: '',
        id: '',
        endTime: '',
        startTime: ''
      }
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
